<template>
<!-- 点击盒子，子让父改值 -->
  <div >
    <div @click="$emit('like',obj.dogName)">
        <img src="https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg" alt="">
    <p @click.stop="fn" :style="{backgroundColor:myColor}">{{obj.dogName}}</p>
    </div>
  </div>
</template>

<script>
export default {
    props:{
     obj:{
        type:Object,
        required:true
     }
    },
  data(){
    return {
        myColor:''
    }
  },
  methods:{
    fn(){
     this.myColor =  `rgb(${this.randonum()} ${this.randonum()} ${this.randonum()})`
    //  console.log(this.myColor)
    },
    // 封装随机函数
    randonum(){
        return Math.floor(Math.random()*256)
    }
  }
}
</script>

<style scoped>
div{
    width: 300px;
    text-align: center;
    float: left;
}
img{
    width: 100%;
}
</style>